import { useEffect, useState } from 'react';

import "./index.less"
import { Card, Col, Row } from 'antd';
const CardHeader = ({ title1, title2, values, cardValue }: any) => {

    const [card, setCard] = useState(1);

    const [imgTitle, setImgTitle] = useState("")
    const [imgsrc, setImgSrc] = useState("")

    const [currentCard, setCurrentCard] = useState(1)
    const [totalCards, setTotalCards] = useState(1)

    const [currentSentence, setCurrentSentence] = useState(0)
    let totalSentences = 0

    const [buttonTitile, setButtonTitle] = useState("")

    useEffect(() => {
        const imgList = values?.tbSentencesVos
        if (imgList && imgList.length > 0) {
            const totalNum = imgList?.length
            setTotalCards(totalNum)
            setImgSrc(imgList[card - 1]?.imgUrl)
            setImgTitle(`对话卡片${imgList[card - 1]?.cardNo}`)
            setButtonTitle("准备学习")

        }
    }, [values, card])



    return (
        <div className="header">
            {/* 进度信息 */}
            <Row justify="space-between" className="navigation-header">
                <Col>
                    <div className="card-label">
                        <span className="label-text">{title1}</span>
                        {
                            totalCards > 0 && (
                                <span className="label-count">{currentCard}/{totalCards}</span>
                            )
                        }
                    </div>
                </Col>
                <Col>
                    <div className="card-label">
                        <span className="label-text">{title2}</span>
                        {
                            totalSentences > 0 && (
                                <span className="label-count">{currentSentence}/{totalSentences}</span>
                            )
                        }
                    </div>
                </Col>


            </Row>
            {/* 进度圆点 */}
            <div className="button-container">
                {[...Array(totalCards)].map((_, index) => (
                    <button
                        key={index}
                        className={`circle-button ${card === index + 1 && 'active'}`}
                        onClick={() => {
                            setCard(index + 1)
                            setCurrentCard(index + 1)
                            cardValue(`${index + 1}`);
                        }
                        }
                    >
                        {index + 1}
                    </button>
                ))}
            </div>
            {/* 图片内容 */}
            <Card className="title-card"
                title={imgTitle}
                cover={
                    <img
                        src={imgsrc}
                    />
                }
                styles={{
                    title: {
                        color: '#a7acef', display: "flex", justifyContent: "center"
                    },
                    body: {
                        padding: '0px'
                    }
                }}>

            </Card>

        </div >
    )
}

export default CardHeader;